<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="base::common_head(~{::title},~{})">
    <title>zookeeper连接管理</title>
</head>
<body>
<div th:replace="~{base::navbar}"></div>
<div class="container-fluid all">
    <div class="sidebar">
        <ul class="nav" th:include="base::sidebar(~{::li})">
        </ul>
    </div>
    <div class="maincontent row">
        <ul class="breadcrumb">
            <li class="active">Zookeeper管理</li>
        </ul>
        <div class="col-sm-12">
            <div class="jumbotron">
                <button type="button" class="btn btn-primary" id="btn_add_zk">添加zookeeper连接</button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>别名</th>
                        <th>连接状态</th>
                        <th>主机和端口</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="zkinfo:${zkinfos}">
                        <td th:text="${zkinfo.id}"></td>
                        <td th:text="${zkinfo.alias}"></td>
                        <td>
                            <span th:if="${zkinfo.connState=='CONNECTED'} or ${zkinfo.connState=='RECONNECTED'}"
                                  class="label label-success" th:text="${zkinfo.connState}"></span>
                            <span th:if="${zkinfo.connState=='READ_ONLY'}" class="label label-info" th:text="${zkinfo.connState}"></span>
                            <span th:if="${zkinfo.connState=='SUSPENDED'}" class="label label-warning" th:text="${zkinfo.connState}"></span>
                            <span th:if="${zkinfo.connState=='LOST'}" class="label label-danger" th:text="${zkinfo.connState}"></span>
                        </td>
                        <td th:text="${zkinfo.hosts}"></td>
                        <td th:text="${zkinfo.createTime}"></td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm" th:if="${zkinfo.connState=='LOST'}" th:value="${zkinfo.alias}" name="btn_reconnect">重新连接</button>
                            <button type="button" class="btn btn-danger btn-sm" th:value="${zkinfo.alias}" name="btn_delete">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_zk" tabindex="-1" role="dialog" aria-labelledby="modalZk">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal_user_title"></h4>
            </div>
            <div class="modal-body">
                <form id="form_zkinfo" th:action="@{/zkinfo}" class="form-horizontal" method="post">
                    <div class="form-group">
                        <label for="modal_input_username" class="control-label  col-sm-4">别名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="alias" id="modal_input_username" maxlength="20"
                                   autocomplete="new-password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_password" class="control-label  col-sm-4">zookeeper地址和端口</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="hosts" id="modal_input_password"
                                   placeholder="192.168.1.100:2181,192.168.1.101:2181"
                                   autocomplete="new-password"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn_zk_submit">提交</button>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{base::script}"></div>
<script th:inline="javascript">
    var failMessage = /*[[${zkInfosFailMessage}]]*/ "";
    if (failMessage) {
        toastr["error"](failMessage);
    }
    /*<![CDATA[*/
    var contextPath = /*[[${#httpServletRequest.getContextPath()}]]*/ null;
    /*]]>*/

    var formZk = $("#form_zkinfo");
    var modalZk = $("#modal_zk");
    var btnZkSubmit = $("#btn_zk_submit");
    $("button[name='btn_delete']").on("click", function () {
        var btn = $(this);
        swal({
            title: "你确定?",
            text: "删除之后，该数据将无法再恢复!",
            icon: "warning",
            buttons: true,
            dangerMode: true
        }).then(function (willDelete) {
            if (willDelete) {
                btn.attr("disabled", "disabled");
                $.ajax({
                    type: "DELETE",
                    async:true,
                    dataType: "json",
                    url: contextPath + "/zkinfo/" + btn.val(),
                    success: function (data) {
                        if (10000 === data.code) {
                            window.location.href = contextPath + "zkinfos";
                        } else {
                            swal("删除" + btn.val() + "连接失败", data.msg, "error");
                        }
                    },
                    error: function (status, errorThrown) {
                        swal("删除" + btn.val() + "连接失败", status.statusText + " " + errorThrown.toString(), "error");
                    },
                    complete: function () {
                        btn.removeAttr("disabled");
                    }
                });
            }
        });
    });

    $("button[name='btn_reconnect']").on("click", function () {
        var btn = $(this);
        btn.attr("disabled", "disabled");
        $.ajax({
            type: "POST",
            async:true,
            dataType: "json",
            url: contextPath + "/zkinfo/reconnect/" + btn.val(),
            success: function (data) {
                if (10000 === data.code) {
                    window.location.href = contextPath + "zkinfos";
                } else {
                    swal("重连" + btn.val() + "失败", data.msg, "error");
                }
            },
            error: function (textStatus, errorThrown) {
                swal("重连" + btn.val() + "失败", status.statusText + " " + errorThrown.toString(), "error");
            },
            complete: function () {
                btn.removeAttr("disabled");
            }
        });
    });

    $("#btn_add_zk").on("click", function () {
        modalZk.find("#modal_user_title").html("添加zookeeper配置");
        modalZk.modal();
    });

    formZk.find("input").each(function () {
        $(this).on("focus", function () {
            $(this).parents(".form-group").removeClass("has-error");
        });
    });

    modalZk.on("hidden.bs.modal", function () {
        formZk.find("div .form-group").removeClass("has-error");
        formZk.find("input").val("");
    });

    btnZkSubmit.on("click", function () {
        var submit = true;
        formZk.find("input[type!='hidden']").each(function () {
            if ($(this).val().trim() === "") {
                submit = false;
                $(this).parents("div .form-group").addClass("has-error");
            }
        });
        if (submit) {
            modalZk.modal();
            formZk.submit();
        }
    });
    $(function () {
        var ws = new WebSocket("ws://" + window.location.host + contextPath + "/zk/state");
        ws.onopen = function (ev) {
        };
        ws.onmessage = function (ev) {
            var dataJson = JSON.parse(ev.data);
            var message = "连接: " + dataJson.connStr + "状态变化为: " + dataJson.connState;
            var type;
            if("SUSPENDED" === dataJson.connState){
                type = "warning";
            }else if ("LOST" === dataJson.connState) {
                type = "error";
            } else {
                type = "info";
            }
            swal("连接状态发生变化", message, type).then(function (value) {
                window.location.reload();
            });
        };
    });
</script>
</body>
</html>